<template>
  <div class="asset-apply-page">
    <!-- 1. 查询表单 -->
    <el-form :model="searchForm" inline label-width="80px">
      <el-form-item label="资产名称">
        <el-input 
          v-model="searchForm.assetName" 
          placeholder="请输入资产名称" 
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="资产状态">
        <el-select 
          v-model="searchForm.status" 
          placeholder="请选择状态" 
          clearable
        >
          <el-option label="在用" value="IN_USE"></el-option>
          <el-option label="闲置" value="IDLE"></el-option>
          <el-option label="维修中" value="REPAIRING"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">查询</el-button>
      </el-form-item>
    </el-form>

    <!-- 2. 资产列表 -->
    <el-table 
      :data="assetList" 
      border 
      style="width: 100%; margin-top: 20px"
      v-loading="loading"
    >
      <el-table-column type="index" label="序号"></el-table-column>
      <el-table-column prop="assetCode" label="资产编号"></el-table-column>
      <el-table-column prop="assetName" label="资产名称"></el-table-column>
      <el-table-column prop="assetType" label="资产类型"></el-table-column>
      <el-table-column prop="status" label="状态">
        <template #default="scope">
          {{ statusMap[scope.row.status] }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="text" @click="openApplyDialog(scope.row)">申请领用</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 3. 申请领用弹窗 -->
    <el-dialog 
      title="申请领用资产" 
      v-model="applyDialogVisible" 
      width="500px"
    >
      <el-form 
        :model="applyForm" 
        ref="applyFormRef" 
        label-width="120px"
        :rules="applyRules"
      >
        <el-form-item label="资产名称" prop="assetName">
          <el-input v-model="applyForm.assetName" disabled></el-input>
        </el-form-item>
        <el-form-item label="申请人名称" prop="applicantName">
          <el-input v-model="applyForm.applicantName" placeholder="请输入申请人名称"></el-input>
        </el-form-item>
        <el-form-item label="部门名称" prop="deptName">
          <el-input v-model="applyForm.deptName" placeholder="请输入部门名称"></el-input>
        </el-form-item>
        <el-form-item label="申请原因" prop="reason">
          <el-input 
            type="textarea" 
            v-model="applyForm.reason" 
            placeholder="请输入申请原因"
            rows="3"
          ></el-input>
        </el-form-item>
        <el-form-item label="预计归还日期" prop="expectReturnTime">
          <el-date-picker
            v-model="applyForm.expectReturnTime"
            type="date"
            placeholder="选择日期"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="applyDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitApply">确认申请</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
// 引入接口（假设已封装）
import { getAssetList, submitApply } from '@/api/asset'

// 1. 响应式数据定义
// 搜索表单
const searchForm = reactive({
  assetName: '',
  status: ''
})

// 资产列表
const assetList = ref([])
const loading = ref(false) // 加载状态

// 状态映射表（常量）
const statusMap = {
  IN_USE: '在用',
  IDLE: '闲置',
  REPAIRING: '维修中'
}

// 申请弹窗
const applyDialogVisible = ref(false)
const applyFormRef = ref(null) // 表单引用
// 申请表单数据
const applyForm = reactive({
  assetId: '',
  assetName: '',
  applicantName: '',
  deptName: '',
  reason: '',
  expectReturnTime: ''
})
// 申请表单校验规则
const applyRules = {
  applicantName: [{ required: true, message: '请输入申请人名称', trigger: 'blur' }],
  deptName: [{ required: true, message: '请输入部门名称', trigger: 'blur' }],
  reason: [{ required: true, message: '请输入申请原因', trigger: 'blur' }],
  expectReturnTime: [{ required: true, message: '请选择预计归还日期', trigger: 'change' }]
}

// 2. 方法定义
// 查询资产列表
const handleSearch = async () => {
  try {
    loading.value = true
    const res = await getAssetList(searchForm)
    assetList.value = res.data
  } catch (err) {
    ElMessage.error(err.message || '查询失败')
  } finally {
    loading.value = false
  }
}

// 打开申请弹窗
const openApplyDialog = (row) => {
  // 重置表单
  applyForm.assetId = row.id
  applyForm.assetName = row.assetName
  applyForm.applicantName = ''
  applyForm.deptName = ''
  applyForm.reason = ''
  applyForm.expectReturnTime = ''
  // 清空校验状态
  if (applyFormRef.value) {
    applyFormRef.value.clearValidate()
  }
  applyDialogVisible.value = true
}

// 提交领用申请
const submitApply = async () => {
  // 表单校验
  if (!applyFormRef.value) return
  const valid = await applyFormRef.value.validate()
  if (!valid) return

  try {
    await submitApply(applyForm)
    ElMessage.success('申请提交成功')
    applyDialogVisible.value = false
    handleSearch() // 刷新列表
  } catch (err) {
    ElMessage.error(err.message || '提交失败')
  }
}

// 3. 生命周期
onMounted(() => {
  handleSearch() // 页面加载时默认查询
})
</script>

<style scoped>
.asset-apply-page {
  padding: 20px;
}
</style>